<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>Psychology Manage System</title>
		<!-- Favicon -->
		<link rel="shortcut icon" href="assets/img/favicon.png">

		<link rel="stylesheet" href="assets/css/element.css">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">

		<!-- Fontawesome CSS -->
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">


		<!-- Main CSS -->
		<link rel="stylesheet" href="assets/css/style.css">

		<script src="assets/js/vue.js"></script>
		<script src="assets/js/axios.js"></script>
		<script src="assets/util/localStorageUtil.js"></script>
		<script src="assets/util/request.js"></script>
		<script src="assets/util/common.js"></script>
		<script src="assets/js/element.js"></script>
		<script src="assets/util/jsencrypt.js"></script>


		<!--[if lt IE 9]>
			<script src="assets/js/html5shiv.min.js"></script>
			<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

		<!-- Main Wrapper -->
		<div class="main-wrapper" id="editcustomer">

			<!-- Header -->
			<div class="header">

				<!-- Logo -->
				<div class="header-left">
					<a href="profile.html" class="logo">
						<img src="assets/img/logo.png" alt="Logo">
					</a>
					<a href="profile.html" class="logo logo-small">
						<img src="assets/img/logo-small.png" alt="Logo" width="30" height="30">
					</a>
				</div>
				<!-- /Logo -->

				<!-- Sidebar Toggle -->
				<a href="javascript:void(0);" id="toggle_btn">
					<i class="fas fa-bars"></i>
				</a>
				<!-- /Sidebar Toggle -->


				<!-- Mobile Menu Toggle -->
				<a class="mobile_btn" id="mobile_btn">
					<i class="fas fa-bars"></i>
				</a>
				<!-- /Mobile Menu Toggle -->

				<!-- Header Menu -->
				<ul class="nav user-menu">

					<!-- Flag -->
					<li class="nav-item dropdown has-arrow flag-nav">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">
							<img src="assets/img/flags/zh.png" alt="" height="20"> <span>简体中文</span>
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="assets/img/flags/zh.png" alt="" height="16"> 简体中文
							</a>
						</div>
					</li>
					<!-- /Flag -->


					<!-- User Menu -->
					<li class="nav-item dropdown has-arrow main-drop">
						<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<span class="user-img">
								<img :src="userinfo.figureUrl==='' ? 'assets/img/logo-small.png': userinfo.figureUrl " alt="">
								<span class="status online"></span>
							</span>
							<span v-html="userinfo.nickname"></span>
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="profile.html"><i data-feather="user" class="mr-1"></i> 个人中心</a>
							<button class="dropdown-item" onclick="logout()"><i data-feather="log-out" class="mr-1"></i> 注销</button>
						</div>
					</li>
					<!-- /User Menu -->

				</ul>
				<!-- /Header Menu -->

			</div>
			<!-- /Header -->

			<!-- Sidebar -->
			<div class="sidebar" id="sidebar">
				<div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu" >
						<ul id="sidebarMenu">
						</ul>
					</div>
				</div>
			</div>
			<!-- /Sidebar -->

			<!-- Page Wrapper -->
			<div class="page-wrapper">
				<div class="content container-fluid">

					<div class="profile-cover">
						<div class="profile-cover-wrap">
							<img class="profile-cover-img" :src="thiUserinfo.figureUrl" alt="Profile Cover">
						</div>
					</div>

					<div class="text-center mb-5">
						<label class="avatar avatar-xxl profile-cover-avatar" >
							<img class="avatar-img" :src="thiUserinfo.figureUrl" alt="Profile Image">
						</label>
						<h2>{{thiUserinfo.nickname}} <i class="fas fa-certificate text-primary small" data-toggle="tooltip" data-placement="top" title="" data-original-title="昵称"></i></h2>
					</div>

					<div class="row">
						<div class="col-xl-3 col-md-4">

							<!-- Settings Menu -->
							<div class="widget settings-menu">
								<ul>
									<li class="nav-item">
										<a v-on:click="changeDisplayCard('basicInfo',1)" type="button"  :class="{active: cardActive===1}">
											<i class="far fa-user"></i> <span>基本信息</span>
										</a>
									</li>
									<li class="nav-item">
										<a v-on:click="changeDisplayCard('examRecord',2)" type="button"  :class="{active: cardActive===2}" >
											<i class="far fa-list-alt"></i> <span>答题记录</span>
										</a>
									</li>
									<li class="nav-item">
										<a v-on:click="changeDisplayCard('accountSetting',3)" type="button"  :class="{active: cardActive===3}">
											<i class="fas fa-unlock-alt"></i> <span>账号设置</span>
										</a>
									</li>
								</ul>
							</div>
							<!-- /Settings Menu -->

						</div>

						<div class="col-xl-9 col-md-8">

							<div class="card" id="basicInfo" v-show="displayCard.basicInfo">
								<div class="card-header form-line">
									<span class="card-title" style="font-size: 20px">基本信息</span>
									<span  style="float: right;font-size: 15px;"><a href="#" v-on:click="enableEdit">{{editOrDisable}}</a></span>
								</div>
								<div class="card-body">
									<!-- Form -->
									<el-form :model="userinfo" :rules="rules" ref="ruleForm">
										<div class="row">
											<label class="col-sm-3 col-form-label input-label">昵称</label>
											<div class="col-sm-9">
												<el-form-item prop="nickname">
													<el-input type="text" style="width: 100%" id="name" placeholder="昵称" v-bind:disabled="disabled" v-model="thiUserinfo.nickname"></el-input>
												</el-form-item>
											</div>
										</div>

										<div class="row ">
											<label class="col-sm-3 col-form-label input-label">性别 <span class="text-muted">(可选)</span></label>
											<div class="col-sm-9">
												<el-form-item prop="sex">
													<el-select v-model="thiUserinfo.sex" placeholder="请选择" style="width: 100%" v-bind:disabled="disabled"  clearable>
														<el-option label="男" :value="Number(10)"></el-option>
														<el-option label="女" :value="Number(20)"></el-option>
													</el-select>
												</el-form-item>
											</div>
										</div>

										<div class="row">
											<label class="col-sm-3 col-form-label input-label">生日 <span class="text-muted">(可选)</span></label>
											<div class="col-sm-9">
												<el-form-item prop="birthDate">
													<el-date-picker
															style="width: 100%"
															v-model="thiUserinfo.birthDate"
															type="date"
															v-bind:disabled="disabled"
															value-format="yyyy-MM-dd"
															placeholder="选择日期">
													</el-date-picker>
												</el-form-item>
											</div>
										</div>


										<div class="row ">
											<label class="col-sm-3 col-form-label input-label">手机号 <span class="text-muted">(可选)</span></label>
											<div class="col-sm-9">
												<el-form-item prop="phone">
													<el-input type="text" style="width: 100%" placeholder="手机号" v-bind:disabled="disabled"  v-model="thiUserinfo.phone"></el-input>
												</el-form-item>
											</div>
										</div>

										<div class="row form-group">
											<label class="col-sm-3 col-form-label input-label">邮箱</label>
											<div class="col-sm-9">
												<el-input type="email" style="width: 100%" id="email" placeholder="邮箱" disabled="disabled"  v-model="thiUserinfo.email"></el-input>
											</div>
										</div>

										<div class="row form-group">
											<label class="col-sm-3 col-form-label input-label">创建日期 </label>
											<div class="col-sm-9">
												<el-date-picker
														style="width: 100%"
														v-model="thiUserinfo.createDate"
														type="date"
														disabled="disabled"
														value-format="yyyy-MM-dd"
														placeholder="选择日期">
												</el-date-picker>
											</div>
										</div>

										<div class="row form-group">
											<label class="col-sm-3 col-form-label input-label">最近登录日期 </label>
											<div class="col-sm-9">
												<el-date-picker
														style="width: 100%"
														v-model="thiUserinfo.lastUserLoginDate"
														type="date"
														disabled="disabled"
														value-format="yyyy-MM-dd HH:mm:ss"
														placeholder="选择日期">
												</el-date-picker>
											</div>
										</div>
										<div class="row form-group">
											<label class="col-sm-3 col-form-label input-label">最近更改密码日期 </label>
											<div class="col-sm-9">
												<el-date-picker
														style="width: 100%"
														v-model="thiUserinfo.lastPasswordRestDate"
														type="date"
														disabled="disabled"
														value-format="yyyy-MM-dd HH:mm:ss"
														placeholder="选择日期">
												</el-date-picker>
											</div>
										</div>

										<div class="row form-group">
											<label  class="col-sm-3 col-form-label input-label">用户状态 </label>
											<div class="col-sm-9">
												<el-select v-model="thiUserinfo.userStatus+''" placeholder="请选择" style="width: 100%" disabled="disabled" clearable>
													<el-option label="正常" value=1></el-option>
													<el-option label="冻结" value=0></el-option>
												</el-select>
											</div>
										</div>

										<div class="text-right">
											<button type="button" v-bind:disabled="disabled" class="btn btn-primary" v-on:click="onSubmit">保 存</button>
										</div>
									</el-form>
									<!-- /Form -->

								</div>
							</div>
							<div class="card" id="examRecord" v-show="displayCard.examRecord">
								<div class="card-header form-line">
									<span class="card-title" style="font-size: 20px">答题记录</span>
								</div>
								<div class="card-body">
									<el-table
											v-loading="loading"
											:data="recordList"
											style="width: 100%">
										<el-table-column fixed label="序号"
														 width="50" align="center">
											<template scope="scope"><span>{{scope.$index+(pageNum - 1) * pageSize + 1}} </span></template>
										</el-table-column>
										<el-table-column label="量表名称">
											<template scope="scope">
												<a href="#" v-on:click="skipDetail(scope.row.recordId)" class="user-a">{{scope.row.scaleName}} </a>
											</template>
										</el-table-column>
										<el-table-column
												prop="scaleTypeName"
												label="量表类型"
										>
										</el-table-column>
										<el-table-column
												prop="useTime"
												label="耗时"
										>
										</el-table-column>

										<el-table-column
												prop="createDate"
												label="创建时间"
										>
										</el-table-column>

									</el-table>
									<div class="block">
										<el-pagination
												@size-change="handleSizeChange"
												@current-change="handleCurrentChange"
												:current-page="pageNum"
												:page-sizes="pageSizes"
												:page-size="pageSize"
												:page-count="9"
												layout="total, sizes, prev, pager, next, jumper"
												:total="totalSize">
										</el-pagination>
									</div>
								</div>
							</div>
							<div class="card" id="accountSetting" v-show="displayCard.accountSetting">
								<div class="card-header form-line">
									<span class="card-title" style="font-size: 20px">账户设置</span>
								</div>
								<div class="card-body">
									<div>
										<span class="card-title" style="font-size: 20px"><i class="fas fa-unlock-alt"></i> <span>密码</span></span>
										<span  style="float: right;font-size: 20px;" v-on:click="displayPasswordFormChange"><a href="#" >修改密码</a></span>
										<el-form :rules="rules" :model="passwordForm" style="margin-top: 10px" v-show="displayPasswordForm">
											<el-form-item prop="newPassword">
												<el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" ></el-input>
											</el-form-item>
											<el-button type="primary" v-on:click="changePassword">提 交</el-button>
										</el-form>

									</div>
									<div style="margin-top: 20px">
										<span class="card-title" style="font-size: 20px"><i class="fas fa-mail-bulk"></i> <span>邮箱</span></span>
										<span  style="float: right;font-size: 20px;"><a href="#" >修改邮箱</a></span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /Page Wrapper -->

		</div>
		<!-- /Main Wrapper -->

		<!-- jQuery -->
		<script src="assets/js/jquery-3.5.1.min.js"></script>

		<!-- Bootstrap Core JS -->
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- Feather Icon JS -->
		<script src="assets/js/feather.min.js"></script>

		<!-- Slimscroll JS -->
		<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>



		<!-- Custom JS -->
		<script src="assets/js/script.js"></script>

	</body>
<script>
	let storage = new Storage();

	var profile = new Vue({
		el: '#editcustomer',
		data() {

			const checkPhone = (rule,value,callback) =>{
				if(value !== storage.getItem("userinfo").phone+'' && value!==undefined){
					const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if(!pattern.test(value)){
						callback(new Error("请输入正确手机号"))
					}else{
						callback();
					}
				}else {
					callback();
				}
			};
			const checkNickName = (rule,value,callback) =>{
				if(value !== storage.getItem("userinfo").nickname+''){
					if(value === null || value ===''){
						callback(new Error("昵称不能为空"))
					}else if(value.length > 25){
						callback(new Error("昵称长度太长，小于25位"))
					}else{
						callback();
					}
				}else {
					callback();
				}
			};

			return {
				//初始页
				userinfo: {},
				thiUserinfo: {},
				recordList: [],
				encrypt: null,
				activePage: '/customers.html',
				loading: false,
				disabled: true,
				editOrDisable: "编 辑",
				cardActive: 1,
				pageNum: 1,
				totalSize: 0,
				pageSize: 10,
				pageSizes: [2,3,5,10,20,50,100],
				displayCard:{
					basicInfo: true,
					examRecord: false,
					accountSetting: false
				},
				displayPasswordForm: false,

				passwordForm:{
					oldPassword: '',
					newPassword: ''
				},
				rules: {
					phone: [
						{validator: checkPhone,trigger: 'change'}
					],
					nickname: [
						{validator: checkNickName,trigger: 'change'}
					],
					oldPassword: [
						{required: true,message:"请输入原密码",trigger: 'blur'},
						{min: 6,max: 30,message: '密码长度6-30位',trigger: 'blur'},
					],
					newPassword: [
						{required: true,message:"请输入新密码",trigger: 'blur'},
						{min: 6,max: 30,message: '密码长度6-30位',trigger: 'blur'},
					]
				}
			}
		},
		methods: {

			getUserInfo() {
				//设置用户信息
				if(storage.getItem("userinfo")!=null){
					this.userinfo = storage.getItem("userinfo");
					initMenu(storage.getItem("routeMap"),this.activePage)
				}else{
					service.get("/user/getUserInfo").then(res=>{
						storage.setItem({
							name: "userinfo",
							value: res.data.userinfo
						})
						storage.setItem({
							name: "routeMap",
							value: res.data.routeMap
						})
						initMenu(res.data.routeMap,this.activePage)
						this.userinfo = res.data;
					});
				}
			},

			initUserInfo(){
				const userId = window.location.href.split("?")[1].split("=")[1];
				service.get("/user/getUserByUserId?userId="+userId).then(res=>{
					this.thiUserinfo = res.data
					this.getExamRecordList(this.pageNum,this.pageSize,false)
				})

			},

			onSubmit(){
				this.$refs['ruleForm'].validate(valid =>{
					if(valid){
						const user = {
							userId: this.thiUserinfo.userId,
							nickname: this.thiUserinfo.nickname,
							birthDate: this.thiUserinfo.birthDate,
							sex: this.thiUserinfo.sex,
							phone: this.thiUserinfo.phone
						};
						service({
							method: "post",
							url: "/user/updateUserInfo",
							data: user
						}).then(res=>{
							if(res.data){
								this.$message({type:"success",message: "更新用户信息成功"})
								this.enableEdit();
							}
						})
					}else{
						this.$message({message:"数据格式不正确",type:"error"})
					}
				})
			},

			handleSizeChange(size) {
				this.pageSize = size;
				this.getExamRecordList(this.pageNum,this.pageSize,true)
			},
			handleCurrentChange(currentPage) {
				this.pageNum = currentPage
				this.getExamRecordList(this.pageNum,this.pageSize,true)
			},
			getExamRecordList(pageNum, pageSize,isForm){

				var data = {
					userId: this.thiUserinfo.userId,
					pageNum: pageNum,
					pageSize: pageSize
				};

				if(isForm){
					data.pageNum = pageNum;
					data.pageSize = pageSize
				}

				service({
					method: 'post',
					url: "/exam/getRecordByUserId",
					data: data
				}).then(res=>{
					this.recordList = res.data.dataList;
					this.totalSize = res.data.totalSize
				})
			},

			changeDisplayCard(card,act){
				for(item in this.displayCard){
					this.displayCard[item] = item === card;
				}
				this.cardActive = act;
			},

			enableEdit(){
				if(this.disabled){
					this.editOrDisable = "返 回"
					this.disabled = false;
				}else{
					this.editOrDisable = "编 辑"
					this.disabled = true;
					this.userinfo = storage.getItem("userinfo");
				}
			},
			skipDetail(recordId){
				window.location.href="/examination-record-detail.html?recordId="+recordId;
			},

			displayPasswordFormChange(){
				this.displayPasswordForm = !this.displayPasswordForm;
			},

			changePassword(){
				this.initPublicKey();
				const data = {
					userId: this.thiUserinfo.userId,
					newPassword: this.encrypt.encrypt(this.passwordForm.newPassword)
				};
				service({
					method: 'post',
					url: '/user/changePassword',
					data: data
				}).then(res=>{
					if(res.data){
						this.$message({message:"密码修改成功",type:"success"})
					}else{
						this.$message({message:"密码修改失败",type:"warning"})
					}
				})
			},
			initPublicKey(){
				this.encrypt = new JSEncrypt();
				this.encrypt.setPublicKey(storage.getItem("publicKey"))
			}
		},
		created(){
			//请求公钥
			getPublicKey();
		},
		mounted() {
			this.getUserInfo();
			this.initUserInfo();
			intThisPoint(this);

		},
	})


</script>
</html>
